
{extend name="layout"}
{block name="body"}

<section class="wld-content">
	<div class="page_title">立即付款</div>
	<div class="page_title_obj">
		<a class="go_back" href="{:url('index/insbill/index')}"><i class="iconfont iconcontract2-fill"></i>返回到社保账单</a>

	</div>
	<div class="con_box layui-form">

		<form class="layui-form-type layui-form mainForm" data-auto="true" data-callback="submitCallback">
			<div class="con_title">
				<span class="con_title_line"></span>
				<span>核对付款信息</span>
			</div>
			<div class="layui-form-item add-input-look">
				<ul>
					<li>
						<div>
							<span>订单编号：</span>
							{$info.code|default=''}
						</div>
						<div>
							<span>应付金额：</span>
							{$info.receivable|default=''}

						</div>
						<div>
							<span>所属账期：</span>
							{$info.account_period|default=''}
						</div>
					</li>

				</ul>
			</div>
			<div class="con_title">
				<span class="con_title_line"></span>
				<span>选择支付方式</span>
			</div>
			<div class="btn-methods">
				<a type='button' class="layui-btn" data-pay="methods-gdg">公对公转账</a>
				<a type='button' class="layui-btn layui-btn-primary" data-pay="methods-alipay">支付宝转账</a>
				<a type='button' class="layui-btn layui-btn-primary" data-pay="methods-wechat">微信支付</a>
			</div>
			<div class="methods-box">
				<div class="methods-detail methods-gdg">
					<div>
						<p><span>公司名称：</span>   <span>石家庄沃伦德人力资源服务有限公司</span> </p>
						<p><span>银行卡号：</span>  <span>13001615408050517433</span> </p>
						<p><span>开户银行：</span>  <span>中国建设银行股份有限公司石家庄铁道支行</span> </p>
						<p><span>银行行号：</span>  <span>105121061084</span> </p>
						<p><span>付款金额：</span>  <span class="is-red">{$info.receivable|default=''}</span> </p>
						<p><span>付款备注：</span>  <span class="is-red">{$info.code|default=''}</span> </p>
					</div>
					<div>
						<p class="is-bold">注意事项：</p>
						<p>1.  转账时务必保证转账金额与订单金额一致，请勿多转、少转；</p>
						<p>2.  汇款时将订单编号填写至汇款单“用途/备注/摘要”等栏；</p>
						<p>3.  转账完成后请点击下方的“我已转账”按钮，有助于提升对账进度；</p>
						<p>4.  若超出1个工作日仍未对账，可联系客服0311-85202890咨询反馈</p>
					</div>
				</div>
				<div class="methods-detail methods-alipay" style="display: none">
					<div>
						<p><span>支付宝账号：</span>   <span>wolunde@126.com</span> <span class="is-code" onclick="showImg()">扫码支付</span></p>
						<p><span>账号名称：</span>  <span>石家庄沃伦德人力资源服务有限公司</span> </p>
						<p><span>付款金额：</span>  <span class="is-red">{$info.receivable|default=''}</span> </p>
						<p><span>付款备注：</span>  <span class="is-red">{$info.code|default=''}</span> </p>
					</div>
					<div>
						<p class="is-bold">注意事项：</p>
						<p>1.  转账时务必保证转账金额与订单金额一致，请勿多转、少转；</p>
						<p>2.  汇款时将订单编号填写至汇款单“用途/备注/摘要”等栏；</p>
						<p>3.  转账完成后请点击下方的“我已转账”按钮，有助于提升对账进度；</p>
						<p>4.  若超出1个工作日仍未对账，可联系客服0311-85202890咨询反馈</p>
					</div>
				</div>
				<div class="methods-detail methods-wechat" style="display: none">
					<div>
						<p>支付金额： <span class="is-red">{$info.receivable_online|default=''}</span>（含通道费：<span class="is-red">{$info.passage_fee|default=''}</span>）</p>
						<img class="wechat-paycode"  src="">
					</div>
					<div>
						<p class="is-bold">注意事项：</p>
						<p>1.  使用微信支付时会收取一定的通道费用；</p>
						<p>2.  若支付遇到问题可联系客服0311-85202890咨询反馈。</p>
					</div>
				</div>

			</div>

			<div class="button-submit">
				<button class="layui-btn">我已转账</button>
				<input type="hidden" name="id"  value="{$info.id|default=''}" />
			</div>
		</form>


	</div>

	<div id="payCode" style="display: none;">
		<img src="__ROOT__/static/index/img/alipay.png"  style="width: 300px;height: auto">
	</div>
</section>
{/block}

{block name='script'}
<script>

	$(function (){
		isFirst = true
		isFinish = false
		var  wxPayTimer = ""
		clearInterval(wxPayTimer)
		$(".btn-methods a").click(function (){
			var payClass=$(this).attr("data-pay")
			if(payClass === "methods-wechat"){
				$(".button-submit").hide()
				if(isFirst){
					isFirst = false

					$.ajax({
						url: '{:url("payment_code")}',
						data: {
							"id":$("input[name='id']").val(),

						},
						type: "post",
						success: function(res) {
							if(res.code == 1) {
								$(".wechat-paycode").attr("src",res.data.pay_code)


							}else {
								layer.msg(res.info)
							}
						},

					});
				}
				wxPayTimer = setInterval(getWeChatPay,2000)

			}else{
				$(".button-submit").show()
				clearInterval(wxPayTimer)
			}

			$(this).removeClass("layui-btn-primary").siblings().addClass("layui-btn-primary")
			$("."+payClass).show().siblings().hide()
		})
		var getWeChatPay = function (){
			if(isFinish){
				return ;
			}
			$.ajax({
				url: '{:url("query_order")}',
				data: {
					"id":$("input[name='id']").val(),

				},
				type: "post",
				success: function(res) {
					if(res.code == 1) {
						if(isFinish){
							return ;
						}
						isFinish = true
						clearInterval(wxPayTimer)
						layer.msg(res.info, {
							icon: 1,
							shade: this.shade,
							offset: '80px',
							scrollbar: false,
							end: function (){
								window.location.href="{:url('index/insbill/paymentSuccess')}"
							},
							time: 2000,
							shadeClose: true
						});

					}
				},

			});

		}

	})
	showImg = function (){
		layer.open({
			type: 1,
			title: false,
			closeBtn: 0,
			area: '300px',
			// skin: 'layui-layer-nobg', //没有背景色
			shadeClose: true,
			content: $('#payCode')
		});
	}
</script>
{/block}

{block name="style"}
<style lang="less">
	.btn-methods{
		margin: 0 45px 30px;

	}
	.btn-methods a{
		display: inline-block;
		width: 120px;

	}
	.btn-methods a{
		margin-right: 30px;
	}
	.btn-methods .layui-btn-primary{
		background-color: #FFFFFF;
	}
	.methods-box{

		margin: 0 45px 30px;
		border: 1px solid #e5e5ed;
		padding: 30px;
		border-radius: 10px;

	}
	.methods-detail{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.methods-detail div{
		flex: 1;
		min-height: 200px;
	}
	.methods-detail div:last-child{
		padding-left: 50px;
		border-left: 1px solid #e5e5ed;;
	}
	.methods-detail div p{
		line-height: 44px;
	}
	.methods-wechat > div:first-child{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	.methods-wechat > div:first-child img{
		width: 200px;
		height: 200px;
		margin-top: 15px;
	}

	.is-red{
		color: #FF5656;
		font-weight: bold;

	}
	.is-bold{
		font-weight: bold;
		font-size: 16px;
	}
	.button-submit{
		margin: 0 45px 30px;
		display: flex;
		align-items: center;
		justify-content: center;

	}
	.button-submit button{
		width: 180px;
	}

	.add-input-look li div:nth-child(1){
		width: 400px;
	}
	.add-input-look li div:nth-child(2){
		width: 370px;
	}

	.add-input-look li div:nth-child(3){
		width: 210px;
	}

	.is-code{
		display: inline-block;
		margin-left: 20px;
		font-weight: bold;
		color: #61cad7;
		cursor: pointer;
	}

</style>
{/block}


